<template>
	<view class="content">
		<view class="content_top">请确认名片信息</view>
		<view class="content_list">
			<view class="name">真实姓名</view>
			<input type="text" v-model="lxr" placeholder="请输入真实姓名"/>
		</view>
		<view class="content_list">
			<view class="name">手机号</view>
			<input type="text" v-model="shouji" placeholder="请输入手机号"/>
		</view>
		<view class="content_list">
			<view class="name">公司</view>
			<input type="text" v-model="company" placeholder="请输入公司"/>
		</view>
		<view class="content_list">
			<view class="name">职位</view>
			<input type="text" v-model="zhiwei" placeholder="请输入职位"/>
		</view>
		<view class="content_list">
			<view class="name">常驻城市</view>
			<input type="text" v-model="ResidentCity" placeholder="请输入常驻城市"/>
		</view>
		<view class="content_list">
			<view class="name">业务专长</view>
			<input type="text" v-model="SpecializedSkill" placeholder="请输入业务专长"/>
		</view>
		<view class="content_list" v-if="email_notnull=='1'">
			<view class="name">电子邮箱</view>
			<input type="text" v-model="email" placeholder="请输入电子邮箱"/>
		</view>
		<view class="content_list" v-if="weixin_notnull=='1'">
			<view class="name">微信</view>
			<input type="text" v-model="weixin" placeholder="请输入微信"/>
		</view>
		<view class="content_tab">
			<view class="name">群标签</view>
			<view class="tab">
				<view :class="['list',mylabels.indexOf(v)>=0?'is':'']" v-for="(v,k) in txllabels" :key="k" @click="addTab(v)">{{v}}</view>
			</view>
		</view>
		<view class="content_button" @click="tijiao">
			加入通讯录
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		homeApi
	} from "@/api/index"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		link
	} from '@/utils/utils.js'
	onLoad((open)=>{
		id.value = open.id
		getUserinfo()
		getData()
	})
	const email_notnull = ref(0)
	const weixin_notnull = ref(0)
	const txllabels = ref([])
	const getData = async()=>{
		let data = {
			do: 'txldetail',
			txlid: id.value,
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txldetail') {
				email_notnull.value = res.columns[i].email_notnull
				weixin_notnull.value = res.columns[i].weixin_notnull
				txllabels.value = res.columns[i].txllabels?res.columns[i].txllabels.split(';'):[]
			}
		}
	}
	const id = ref('')
	const lxr = ref('')
	const shouji = ref('')
	const company = ref('')
	const zhiwei = ref('')
	const ResidentCity = ref('')
	const SpecializedSkill = ref('')
	const email = ref('')
	const weixin = ref('')
	const mylabels = ref([])
	const getUserinfo = async()=>{
		let data = {
			do:'userinfo',
		}
		let res = await homeApi.publicGet(data)
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'userinfo') {
				lxr.value = res.columns[i].lxr?res.columns[i].lxr:''
				shouji.value = res.columns[i].shouji?res.columns[i].shouji:''
				company.value = res.columns[i].company?res.columns[i].company:''
				zhiwei.value = res.columns[i].zhiwei?res.columns[i].zhiwei:''
				ResidentCity.value = res.columns[i].ResidentCity?res.columns[i].ResidentCity:''
				SpecializedSkill.value = res.columns[i].SpecializedSkill?res.columns[i].SpecializedSkill:''
			}
		}
	}
	
	// 选中标签
	const addTab = (e)=>{
		let index = mylabels.value.indexOf(e)
		if(index>=0){
			mylabels.value.splice(index, 1)
		}else{
			mylabels.value.push(e)
		}
	}
	
	// 提交
	const tijiao = async()=>{
		let data = {
			txlid:id.value,
			lxr:lxr.value,
			shouji:shouji.value,
			company:company.value,
			zhiwei:zhiwei.value,
			ResidentCity:ResidentCity.value,
			SpecializedSkill:SpecializedSkill.value,
			mylabels:mylabels.value.join(';'),
		}
		if(email_notnull.value!=0){
			data.email = email.value
		}
		if(weixin_notnull.value!=0){
			data.weixin = weixin.value
		}
		let res = await homeApi.publicPost(data,'txljoin')
		for (let i = 0; i < res.columns.length; i++) {
			if (res.columns[i].name == 'txljoin') {
				if(res.columns[i].statuscode=='200'){
					uni.showToast({
						title:res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},2000)
				}else{
					uni.showToast({
						title: res.columns[i].message,
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		&_top{
			width: calc(100% - 60rpx);
			padding: 30rpx;
			font-size: 36rpx;
			background: #f5f6fa;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		&_list{
			width: calc(100% - 60rpx);
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f5f6fa;
			.name{
				width: 180rpx;
				font-size: 32rpx;
			}
			input{
				flex: 1;
				font-size: 30rpx;
			}
		}
		&_tab{
			width: calc(100% - 60rpx);
			padding: 30rpx;
			border-bottom: 1px solid #f5f6fa;
			.name{
				width: 180rpx;
				font-size: 32rpx;
			}
			.tab{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				.list{
					font-size: 28rpx;
					padding:10rpx 20rpx;
					border: 1px solid #ccc;
					border-radius: 8px;
					margin-top: 20rpx;
					margin-left: 10rpx;
					margin-right: 10rpx;
				}
				.list.is{
					color: #e94f06;
					border-color: #e94f06;
				}
			}
		}
		&_button{
			width: calc(100% - 60rpx);
			height: 100rpx;
			background:#e94f06;
			color: #fff;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
			margin: 0 auto;
			margin-top: 50rpx;
		}
	}
</style>